<template>
	<full-page-layout :safety="false" background-color="#f0f8ff">
		<view class="home-bk-layer"></view>
		<view class="home-float-layer">
			<header-page-layout :full="false" ref="page" title="首页" headerColor="#fff" @headerclick="onHeaderClick">
				<template v-slot:headerright><text class="iconfont icon-out-right"></text></template>
				
				<view class="home-page-containter" :style="{height:pageBodyHeight+'px'}" v-if="pageBodyHeight">
					<view class="user-view-box">
						<view class="user-card home-card">
							<view class="left-view">
								<view class="user-circle"><text class="iconfont icon-worker"></text></view>
							</view>
							<view class="right-view">
								<view class="text-row1 auto-wrap">{{userName}}</view>
								<view class="text-row2 auto-wrap">{{userAcc}}</view>
							</view>
						</view>
					</view>
					<view class="blocks-view-box">
						<view class="home-card item-block-card" v-for="(itema,indexa) in blocks" :key="'item-block-card-'+indexa">
							<view class="title" v-if="itema.title">{{itema.title}}</view>
							<view class="items-view">
								<view class="block-item" v-for="(itemb,indexb) in itema.items" :key="'block-item-'+indexa+'-'+indexb" @tap="onClickBlockItem(itemb.pathName)">
									<view class="block-item-icon" :style="{color:itemb.color}">
										<text class="iconfont" :class="[itemb.icon]"></text>
									</view>
									<view class="block-item-text">{{itemb.name}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>

			</header-page-layout>
		</view>
	</full-page-layout>
</template>

<script>
import FullPageLayout from '@/components/FullPageLayout.vue'
import HeaderPageLayout from '@/components/HeaderPageLayout.vue'
let initInterVal = null;
export default {
	name:'homePage',
	components:{FullPageLayout,HeaderPageLayout},
	data(){
		return {
			pageBodyHeight:0,
			userName:'',
			userAcc:'',
			blocks:[
				{
					items:[
						{name:'入库操作',icon:'icon-store_in',pathName:'basein',color:'#1e90ff'},
						{name:'出库操作',icon:'icon-store_out',pathName:'baseout',color:'#1e90ff'}
					]
				},
				/* {
					title:'Demo',
					items:[
						{name:'单列表',icon:'icon-check-inventory',pathName:'demolist',color:'#1e90ff'},
						{name:'查询列表',icon:'icon-check-inventory',pathName:'demosearchlist',color:'#1e90ff'},
						{name:'查询操作列表',icon:'icon-check-inventory',pathName:'demosearchactionlist',color:'#1e90ff'},
						{name:'单表单',icon:'icon-check-inventory',pathName:'storein',color:'#1e90ff'}
					]
				} */
			]
		}
	},
	methods:{
		onHeaderClick(type){
			if (type==='right') {
				uni.redirectTo({
					url:this.$config.path.login
				})
			}
		},
		onClickBlockItem(path){
			if (path) {
				uni.navigateTo({
					url: this.$config.path[path]
				});
			} else {
				 uni.showToast({title:'开发中...'})
			}
		},
		startInitInterval(callback){
			initInterVal = setInterval(()=>{
				if (this.pageBodyHeight) {
					this.clearInitInterval()
				} else {
					this.pageBodyHeight = this.$refs.page.getBodyHeight()
					callback && callback()
				}
			},200)
		},
		clearInitInterval(){
			try{
				clearInterval(initInterVal)
				initInterVal = null
			}catch(e){
				//TODO handle the exception
			}
		}
	},
	onLoad() {
		let _user = this.$store.getters['user/getUserInfo'];
		this.userName = _user.name;
		this.userAcc = _user.account;
	},
	onReady() {
		this.startInitInterval()
	},
	onUnload(){
		this.clearInitInterval()
	}
}
</script>

<style lang="scss" scoped>
.home-page{
	height: 100%;
	background-color: #f0f8ff;
	position: relative;
}
.home-bk-layer,.home-float-layer{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.home-bk-layer{
	height: 240rpx;
	border-radius: 0 0 80rpx 80rpx;
	background-image: linear-gradient(to right, $color-paimary-middle, $color-paimary-darken);
	z-index: 1;
}
.home-float-layer{
	height: 100%;
	overflow: hidden;
	z-index: 2;
}

.home-page-containter{
	display: flex;
	flex-direction: column;
	overflow: hidden;
	.user-view-box{
		flex-shrink: 0;
		padding-bottom: 30rpx;
	}
	.blocks-view-box{
		flex-grow: 1;
		overflow: auto;
	}
}

.home-card {
	background-color: #fff;
	width: 95%;
	border-radius: 10rpx;
	margin: 0 auto;
	box-sizing: border-box;
}

.user-card{
	display: flex;
	padding: 30rpx 0;
	.left-view{
		width: 180rpx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		.user-circle{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background-image: linear-gradient(to right, $color-paimary-middle, $color-paimary-darken);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 90rpx;
			color: #fff;
		}
	}
	.right-view{
		flex-grow: 1;
		padding-right: 10rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		.text-row1{
			font-size: 36rpx;
			font-weight: bold;
			line-height: 1.3;
		}
		.text-row2{
			padding-top: 10rpx;
			font-size: 28rpx;
			line-height: 1.3;
		}
	}
}

.item-block-card{
	margin-bottom: 30rpx;
	&>.title{
		padding: 20rpx;
		font-weight: bold;
	}
	.items-view{
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 12rpx;
	}
	.block-item{
		width: 33.33%;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.block-item-icon{
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 90rpx;
		}
		.block-item-text{
			padding-top: 4rpx;
			font-size: 24rpx;
			text-align: center;
		}
	}
}
</style>